<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>水土保持方案上报系统</title>
<style type="text/css">
body { margin:0 auto;padding:0px; }	
a { text-decoration:none; }
.last_a { font-size:12px; }
</style>
<link rel="stylesheet" href="<%=request.getContextPath()%>/js/jquery/jquery-ui-1.8.14/themes/base/jquery.ui.all.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery-1.6.2.min.js"></script>
<script src="<%=request.getContextPath()%>/js/jquery/jquery-ui-1.8.14/ui/jquery.ui.core.js"></script>
<script src="<%=request.getContextPath()%>/js/jquery/jquery-ui-1.8.14/ui/jquery.ui.widget.js"></script>
<script src="<%=request.getContextPath()%>/js/jquery/jquery-ui-1.8.14/ui/jquery.ui.accordion.js"></script>
<script src="<%=request.getContextPath()%>/js/jquery/jquery-ui-1.8.14/ui/jquery.ui.tabs.js"></script>

<script type="text/javascript">
$(function() {
	//加载时设置属性
	$( "#accordion" ).accordion({
		autoHeight: false,
		navigation: true,  //是否缓存当前菜单展开状态
		fillSpace: false,  //是否让菜单填满父元素的高度
		active: false  //设置默认让某个下拉框展开，从0到下拉框总数减1，设为false表示加载时不展开任何下拉框
	});
});

//加载时注册单击事件	
$(function() {
	$("#accordion a").click(function(e) {
		if ($(this).parent().is("h3"))  //如果点击的当前菜单有子菜单
		{
			var pardivobj = $(this).parent("h3").next("div:first");
			var divstr =  pardivobj.text().replace(/\s+/g,"");
			if (divstr.length == 0)
			{	
				AJAXgetdata(this.id, pardivobj);
			}
		}
		else                           //如果当前点击的菜单没有子菜单
		{
			if ($(this).attr("href") == "#")  //如果当前菜单下有选项卡，那么还需要异步获取选项卡数据
			{
				AJAXgetdata(this.id, null);
			}
			else                              //如果当前菜单有自己的URL那么，就在右框架中调用此URL来显示相应内容
			{
				var url = $(this).attr("href");
				$("#tabs > ul").next("ui:first").next("a:first").attr("href", url);
			}
		}
	});
});

function openintab(menu){	
	$("#tabs > ul").next("ui:first").next("a:first").attr("href", menu.href);
}

function AJAXgetdata(id, pardivobj)
{
		//用AJAX异步请求数据
		var actionurl = "<%=request.getContextPath()%>/security/permission_getSessionPermission.action"
		//alert("thisid:"+this.id);
		$.get(actionurl, {parentid:id}, function (data, statu){
			//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
			//alert(statu);  //请求状态：success，error等等。
			$(data).find("item").each(function(index, element) {
				var id = $(this).children("id").text(); 
				var name = $(this).children("name").text(); 
				var url = $(this).children("url").text(); 
				var existson = $(this).children("existson").text(); 
				//alert("id="+id+"---- name="+name+"---- existson="+existson);
				
				if (pardivobj != null)
				{
					if (existson == 0)
					{
					  var alink = $("<p><a id="+id+" class='last_a' href='"+url+"' onclick='openintab(this)'>"+name+"</a></p>");
					  				
				      pardivobj.append(alink);
					}
					else
					{
					  var divlink = $("<div id='sonaccordion'><h3><a id="+id+" class='last_a' href='#'>"+name+"</a></h3><div></div></div>");
										
				      pardivobj.append(divlink);
						
					}
				}
				else         //根据返回的子菜单添加选项卡
				{
				
				}

			});
			
			//alert(this);
			
			//分析：
			//得到数据后首先判断果这个权限是否有子权限的话，那么应该有相应的URL
			//其次，如果该权限自己的子权限，那么再判断每个子权限是否有自己的子权限，以此来决定菜单的样式
			//最后，判断得到的这些子权限的类型，是否是选项卡类型，如果是，则在右侧加载相应的选项卡
			//注意：
				//1、返回的数据结构； 
				//2、为菜单注册的单击事件是迭代的； 
				//3、每次请求，返回的数据都是多条的，怎么循环分离出每条数据
				
			//在这里处理返回的数据
			//var contentDiv = $(this).next("div"); 
			//contentDiv.load($(this).find("a").attr("href"));
				
		},"xml")  //以下是回调函数
			//.error(function (){ alert("菜单数据加载错误，请联系技术人员。");});
}
$(function() {
	$( "#sun" ).accordion({
		autoHeight: false,
		navigation: true,
		collapsible: true,
		active: false  //设置默认让那个下拉框展开，从0到下拉框总数减1，设为false表示加载时不展开任何下拉框
	});
	//$( "#sun" ).style("display", "none");  //解决在IE8下仍旧展开第一个下拉框的问题
});	

$(function() {
	$( "#tabs" ).tabs({
		ajaxOptions: {
			error: function( xhr, status, index, anchor ) {
				$( anchor.hash ).html(
					"不能加载此选项卡的数据，请联系技术人员。" );
			}
		}
	});
});

//隐藏或显示菜单
$(function() {
	$( "#collap" ).click(function(){
		if ( $( "#accordion" ).css( "display") != "none" )
		{
			$( "#accordion" ).css( "display", "none");
			$( "#tabs" ).css( "width", "98%");
			//$(this).css( "background-image", "" );
		}
		else
		{
			$( "#tabs" ).css( "width", "78.2%");
			$( "#accordion" ).css( "display", "block");
			//$(this).css( "background-image", "" );	
		}
		})
});

function exitsystem()
{
	var exiturl = "<%=request.getContextPath()%>/security/login_userLogout.action";
	$.get(exiturl);
	
}
</script>
</head>
<body onunload="">
<div id="top" style="width:100%;height:100px;background:url(<%=request.getContextPath()%>/images/top.jpg);">
	<div id="toptext" align="right" style="margin:74px 30px auto;float:right;"> 
    <a href="<%=request.getContextPath()%>/security/security/login_userLogout.action"><img src="<%=request.getContextPath()%>/images/exitsystem.jpg" width="58" height="26" border="0"/></a> 
  </div>
</div>
<div id="center" style="width:100%;float:left;">
  <div id="accordion" style="width:20%;height:100%;float:left;overflow-x:auto;">
  	<s:iterator id="perm" value="#request.firstmenulist" status="index">
    <h3><a id="<s:property value="#perm.permid"/>" name="" href="#"><s:property value="#perm.permName"/></a></h3>
    <div>
    </div>
   </s:iterator>
  </div>
  <div id="collap" style="width:1%;height:100%;float:left;cursor:pointer;">aa</div>
  <div id="tabs" style="width:78.2%;height:100%;float:left;">
    <ul>
      <li><a href="<%=request.getContextPath()%>/systemmanage/system_indexPage.action">权限</a></li>
      <li><a href="indexlist.jsp">Tab 2</a></li>
      <li><a href="indexlist.jsp">Tab 3</a></li>
    </ul>
  </div>
</div>
</body>
  <script type="text/javascript">
	//以下这段JS代码要放在最后，因为只有DOM加载完之后才有以下的操作
	//让DIV自适应屏幕高度
	function autoHeight(){
		var h_window = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
		var h_head = document.getElementById("top").scrollHeight;
		//var h_top = $("#top").style("","");  //想用jquery的方法来得到高度属性
		var h_center = document.getElementById("center").scrollHeight;
		
		if(h_window-h_head > h_center){
			 document.getElementById("center").style.height = (h_window-h_head-38) + "px";
		}else{
			 document.getElementById("center").style.height = (h_center-38) + "px";
		}
	}
	
	autoHeight(); 
	window.onresize = autoHeight;
	</script>
</html>
